<html>
<head>
	<meta charset="utf-8">
	<link href="html5css.css" rel="stylesheet">
	<title>title</title>
</head>
<body>
	<header>header</header>
	<nav><a href="1.html">nav1</a> | <a href="2.html">nav2</a></nav>
	<aside>aside</aside>
	<main>
		main

		<article>
article
<h1>HTML5 的 CSS 排版</h1>

<section>

section1

<h2>本排版的關鍵樣式表</h2>

<pre>
main {
  display:table-cell;  
}

aside {
    width:20%;
    float:left;
    display:table-cell;
}
</pre>	
</section>

<section>
section 2

<h2>參考:</h2>
<ol>
<li>section 和 article 的分別請參考 <a href="http://stackoverflow.com/questions/7549561/section-vs-article-html-5">http://stackoverflow.com/questions/7549561/section-vs-article-html-5</a>
</li>
<li>main 和 aside 的區分採用 display:table-cell; <a href="http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space-a-very-simple-but-annoyi">http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space-a-very-simple-but-annoyi</a></li>
<li>HTML5 語意元素的配置 1 -- <a href="http://www.w3schools.com/html/html5_semantic_elements.asp">http://www.w3schools.com/html/html5_semantic_elements.asp</a></li>
<li>HTML5 語意元素的配置 2 -- <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs">http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs</a></li>
<li>HTML5 語意元素的配置 3 -- <a href="http://www.expression-web-tutorial.com/Structural-Semantic-Elements.html#.VP_gDvmUdNc">http://www.expression-web-tutorial.com/Structural-Semantic-Elements.html#.VP_gDvmUdNc</a></li>
</ol>
</section>
		</article>
	</main>
	<footer>footer</footer>
</body>
</html>